<template>
    <div>
        <van-nav-bar left-arrow title="申请薪资" @click-left="onClickLeft">
            <template #right>
                <div class="top-btn">
                    <van-button type="primary" :class="{ disabled: !formRequired }" block size="small" @click="submit()">提交</van-button>
                </div>
            </template>
        </van-nav-bar>
        <div class="group-info noshadow">
            <span class="group-name">{{ myteam.groupName }}</span>
            <span class="group-money">({{ myteam.employeeNum }}人，薪资包{{ myteam.totalSalary }}，人均{{ myteam.avgSalary }})</span>
        </div>
        <div class="self-evaluation">
            <div class="user-top">
                <div class="user-avatar">
                    <img :src="user.avatar" />
                </div>
                <div class="user-info">
                    <div>
                        <h3>{{ user.userName }}<span>3年</span></h3>
                        <!-- <span class="right-info">上月薪资：16000.00</span> -->
                    </div>
                    <div>
                        <p>{{ user.opDepartmentPositionName }} | 入职{{ user.entrySalary }}</p>
                        <!-- <span class="right-info">平均薪资：17000.00</span> -->
                    </div>
                </div>
            </div>
            <div class="apply-form">
                <div class="box-title">我本月的进步和功劳</div>
                <div class="votes-input">
                    <label>收到<img src="@/assets/images/icon-flower.png" class="icon-image" />:</label>
                    <div>
                        <input
                            class="input-number"
                            :class="{ invalid: !flowerNumV }"
                            max="10000"
                            placeholder="请输入"
                            type="number"
                            pattern="[0-9]*"
                            v-model="form.flowerNum"
                        />
                    </div>
                    <label>收到<img src="@/assets/images/icon-cow.png" class="icon-image" />：</label>
                    <div>
                        <input
                            class="input-number"
                            :class="{ invalid: !cowNumV }"
                            max="10000"
                            placeholder="请输入"
                            type="number"
                            pattern="[0-9]*"
                            v-model="form.cowNum"
                        />
                    </div>
                    <label>收到<img src="@/assets/images/icon-crown.png" class="icon-image" />:</label>
                    <div>
                        <input
                            class="input-number"
                            :class="{ invalid: !crownNumV }"
                            max="10000"
                            placeholder="请输入"
                            type="number"
                            pattern="[0-9]*"
                            v-model="form.crownNum"
                        />
                    </div>
                </div>
                <div class="votes-input">
                    <label>发起群策群力：</label>
                    <div>
                        <input
                            class="input-number"
                            :class="{ invalid: !qunlilanchNumV }"
                            max="10000"
                            placeholder="请输入"
                            type="number"
                            pattern="[0-9]*"
                            v-model="form.qunlilanchNum"
                        />
                    </div>
                    <label>参与群策群力：</label>
                    <div>
                        <input
                            class="input-number"
                            :class="{ invalid: !qunlienterNumV }"
                            max="10000"
                            placeholder="请输入"
                            type="number"
                            pattern="[0-9]*"
                            v-model="form.qunlienterNum"
                        />
                    </div>
                </div>
                <van-field
                    v-model="form.advantageRemark"
                    type="textarea"
                    placeholder="请输入我本月的进步和功劳"
                    maxlength="1000"
                    show-word-limit
                    style="background:#F8F8F8;"
                />
                <div class="box-title">我本月的过失和不足</div>
                <div class="votes-input">
                    <label>收到<img src="@/assets/images/icon-bom.png" class="icon-image" />:</label>
                    <div>
                        <input
                            class="input-number"
                            :class="{ invalid: !bombNumV }"
                            max="10000"
                            placeholder="请输入"
                            type="number"
                            pattern="[0-9]*"
                            v-model="form.bombNum"
                        />
                    </div>
                    <label>收到<img src="@/assets/images/icon-pig.png" class="icon-image" />：</label>
                    <div>
                        <input
                            class="input-number"
                            :class="{ invalid: !pigNumV }"
                            max="10000"
                            placeholder="请输入"
                            type="number"
                            pattern="[0-9]*"
                            v-model="form.pigNum"
                        />
                    </div>
                    <label>换组次数：</label>
                    <div>
                        <input
                            class="input-number"
                            :class="{ invalid: !teamchangeNumV }"
                            max="10000"
                            placeholder="请输入"
                            type="number"
                            pattern="[0-9]*"
                            v-model="form.teamchangeNum"
                        />
                    </div>
                </div>
                <van-field
                    v-model="form.shortcomingRemark"
                    type="textarea"
                    placeholder="请输入我本月的过失和不足"
                    maxlength="1000"
                    show-word-limit
                    style="background:#F8F8F8;"
                />
                <div class="box-title">我本月申请的薪资</div>
                <div class="salary-input">
                    <input placeholder="请输入金额" type="number" maxlength="6" pattern="[0-9]*" v-model="form.salary" :class="{ invalid: !salaryV }" />
                    <span>元</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Button, Icon, NavBar, Rate, Field, Notify, Dialog } from "vant";
import httpRequest from "../../util/httpRequest";
import { useStore } from "vuex";
export default {
    components: {
        [Button.name]: Button,
        [Icon.name]: Icon,
        [NavBar.name]: NavBar,
        [Rate.name]: Rate,
        [Field.name]: Field,
        [Dialog.name]: Dialog,
    },
    data() {
        return {
            store: useStore(),
            user: {},
            myteam: {},
            form: {
                teamId: "",
                flowerNum: "",
                cowNum: "",
                crownNum: "",
                qunlilanchNum: "",
                qunlienterNum: "",
                advantageRemark: "",
                bombNum: "",
                pigNum: "",
                teamchangeNum: "",
                shortcomingRemark: "",
                salary: "",
            },
            formDirty: true,
        };
    },
    computed: {
        formRequired() {
            let bool = true;
            for (let key in this.form) {
                if (!this.form[key]) {
                    bool = false;
                    return;
                }
            }
            return bool;
        },
        flowerNumV() {
            return this.formDirty ? true : this.form.flowerNum ? /^\d+$/.test(this.form.flowerNum) : false;
        },
        cowNumV() {
            return this.formDirty ? true : this.form.cowNum ? /^\d+$/.test(this.form.cowNum) : false;
        },
        crownNumV() {
            return this.formDirty ? true : this.form.crownNum ? /^\d+$/.test(this.form.crownNum) : false;
        },
        bombNumV() {
            return this.formDirty ? true : this.form.bombNum ? /^\d+$/.test(this.form.bombNum) : false;
        },
        pigNumV() {
            return this.formDirty ? true : this.form.pigNum ? /^\d+$/.test(this.form.pigNum) : false;
        },
        teamchangeNumV() {
            return this.formDirty ? true : this.form.teamchangeNum ? /^\d+$/.test(this.form.teamchangeNum) : false;
        },
        qunlilanchNumV() {
            return this.formDirty ? true : this.form.qunlilanchNum ? /^\d+$/.test(this.form.qunlilanchNum) : false;
        },
        qunlienterNumV() {
            return this.formDirty ? true : this.form.qunlienterNum ? /^\d+$/.test(this.form.qunlienterNum) : false;
        },
        salaryV() {
            return this.formDirty ? true : this.form.salary ? /^\d+$/.test(this.form.salary) : false;
        },
    },
    created() {
        httpRequest.get("userInfo", {}).then((res) => {
            this.user = res.data.userInfo;
            httpRequest.post("getTeamSummaryByUserId", { userId: this.user.id }).then((res) => {
                this.myteam = res.data;
                this.form.teamId = res.data.id;
            });
        });
    },
    // 注意：组件挂载后才能访问到 ref 对象
    mounted() {},
    methods: {
        onClickLeft() {
            if (this.formRequired) {
                Dialog.confirm({
                    message: "退出后内容无法保存，确定退出吗？",
                }).then(() => {
                    this.$router.back();
                });
            } else {
                this.$router.back();
            }
        },
        submit() {
            this.formDirty = false;
            if (
                this.formRequired &&
                this.flowerNumV &&
                this.cowNumV &&
                this.crownNumV &&
                this.bombNumV &&
                this.pigNumV &&
                this.teamchangeNumV &&
                this.qunlilanchNumV &&
                this.qunlienterNumV &&
                this.salaryV
            ) {
                httpRequest.post("addTeamInnerSelfComment", this.form).then((res) => {
                    if (res.resultCode === "000000") {
                        Notify({ type: "success", message: "操作成功" });
                        this.$router.back();
                    } else {
                        Notify({ type: "warning", message: res.data });
                    }
                });
            }
        },
    },
};
</script>

<style lang="less" scoped>
.noshadow{
    box-shadow: none !important;
}
#rateline {
    width: 100%;
    height: 300px;
}
.box-title {
    font-size: 30px;
    color: #000;
    text-align: left;
    padding: 30px 0;
}
.top-btn {
    width: 120px;
    button{
        font-size: 30px;
    }
}
button.disabled {
    background: #f2f2f2;
    border-color: #f2f2f2;
    color: #c1c1c1;
}
.self-evaluation {
    margin-bottom: 40px;
    position: relative;
    margin-top: 20px;
    background: #fff;
    .user-top {
        padding: 34px 30px;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        .user-avatar {
            width: 80px;
            height: 80px;
            flex-shrink: 0;
            margin-right: 20px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 8px;
            }
        }
    }
    .apply-form {
        padding: 0px 30px 30px 30px;
        .votes-input {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 690px;
            margin-bottom: 20px;
            label {
                white-space: nowrap;
                font-size: 24px;
                color: #333;
            }
            div {
                flex-shrink: 1;
            }
            input {
                width: 100%;
                text-align: center;
                font-size: 26px;
                color: #000;
                border: none;
                padding: 10px;
                box-sizing: border-box;
                border-bottom: 1px solid #cccccc;
                &.input-number.invalid {
                    border-color: red;
                }
            }
            input::-webkit-input-placeholder,
            textarea::-webkit-input-placeholder {
                color: #ccc;
            }

            input:-moz-placeholder,
            textarea:-moz-placeholder {
                color: #ccc;
            }

            input::-moz-placeholder,
            textarea::-moz-placeholder {
                color: #ccc;
            }

            input:-ms-input-placeholder,
            textarea:-ms-input-placeholder {
                color: #ccc;
            }
        }
        .salary-input {
            height: 80px;
            background: #f8f8f8;
            border-radius: 8px;
            position: relative;
            input {
                border: none;
                background: none;
                width: 100%;
                height: 80px;
                padding-right: 50px;
                padding-left: 20px;
                border-radius: 8px;
                box-sizing: border-box;
                font-size: 28px;
            }
            span {
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 28px;
            }
        }
    }
}
</style>
